<template>
  <d2-container>
    <template slot="header">
      <v-queryCondition uri="/auth/system/user/account/querycondtion/item/list?blockCode=sys_user" blockCode="sys_user" @query="onQuery">
        <el-button @click="onAdd" type="primary" size="small">新增</el-button>
      </v-queryCondition>
    </template>
    <el-table
      :data="tableData"
      style="width: 100%"
      row-key="id"
      stripe>
      <el-table-column
        prop="avatar"
        label="头像"
        width="180">
      </el-table-column>
      <el-table-column
        prop="code"
        label="编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="nameNick"
        label="用户昵称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="nameZh"
        label="中文姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="idCard"
        label="身份证"
        width="180">
      </el-table-column>
      <el-table-column
        prop="gender"
        label="性别"
        width="180">
      </el-table-column>
      <el-table-column
        prop="phoneNumber"
        label="手机号码"
        width="180">
      </el-table-column>
      <el-table-column
        prop="description"
        label="备注"
        width="180">
      </el-table-column>
      <el-table-column
        label="操作"
        width="180">
        <template slot-scope="scope">
          <el-button @click="onEdit(scope.row)" type="text" size="small">编辑</el-button>
          <el-dropdown @command="handleCommand(scope.row, $event)">
            <span class="el-dropdown-link">
              更多<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="c">删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <v-pagination :pageData.sync="pageData" @refreshPageData="refreshPageData"></v-pagination>
    <el-drawer
      title="编辑"
      :wrapperClosable="false"
      :visible.sync="drawerEdit" v-if="drawerEdit">
      <v-edit :id.sync="editId" @closeDrawer="closeDrawer" @refresh="refresh"></v-edit>
    </el-drawer>
    <el-drawer
      title="添加"
      :wrapperClosable="false"
      :visible.sync="drawerAdd" v-if="drawerAdd">
      <v-add @closeDrawer="closeDrawer" @refresh="refresh"></v-add>
    </el-drawer>
  </d2-container>
</template>

<script>
import api from '@/api'
import add from './add.vue'
import edit from './edit.vue'
import pagination from '@/views/public/pagination.vue'
import constant from '@/libs/util.constant'
import queryCondition from '@/views/public/queryCondition.vue'
// import log from '@/libs/util.log'

export default {
  name: 'system-user',
  components: {
    'v-add': add,
    'v-edit': edit,
    'v-pagination': pagination,
    'v-queryCondition': queryCondition
  },
  data () {
    return {
      tableData: [],
      pageData: {
        page: 1,
        size: 10,
        totalRows: 0
      },
      tableItemKey: 0,
      drawerEdit: false,
      drawerAdd: false,
      editId: ''
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    getList () {
      var data = {}
      var param = this.pageData
      api.sysUser.sysUserList(data, param).then(res => {
        this.pageData.totalRows = res.totalRows
        this.tableData = res.content
      })
    },
    onEdit (row) {
      this.editId = row.id
      this.drawerEdit = true
    },
    onAdd () {
      this.drawerAdd = true
    },
    onDelete (data) {
      this.$confirm('此操作将永久删除该项目, 是否继续?', '提示', constant.confirmMsg()).then(() => {
        var param = [data.id]
        api.sysUser.sysUserDeleteById(param).then(res => {
          this.$message({ type: 'info', message: '已删除' })
          this.refresh()
        })
      }).catch(() => {
        this.$message({ type: 'info', message: '已取消删除' })
      })
    },
    onQuery (condition) {
      var data = condition
      var param = this.pageData
      api.sysUser.sysUserList(data, param).then(res => {
        this.pageData.totalRows = res.totalRows
        this.tableData = res.content
      })
    },
    handleCommand (data, c) {
      if (c === 'c') {
        this.onDelete(data)
      }
    },
    closeDrawer () {
      this.drawerAdd = false
      this.drawerEdit = false
    },
    refresh () {
      this.tableData = []
      this.tableItemKey = Math.random()
      this.getList()
    },
    refreshPageData () {
      this.refresh()
    }
  }
}
</script>

<style lang="scss">
</style>
